<template>
  <div class="about">
    <yg-background
      :imgStyle="{
        width: '100%',
        height: '368px',
        objectFit: 'cover',
      }"
      :imgSrc="require('@/assets/images/img_bg05.png')"
    >
      <template #default>
        <div class="yg_background_box">
          <div class="title">关于我</div>
          <div class="content">简单的自我介绍</div>
        </div>
      </template>
    </yg-background>
    <main class="main_box container">
      <!-- 左侧边栏 -->
      <aside class="aside_left hidden-xs">
        <yg-usercard />
        <yg-recommend class="visible-sm" style="margin-top: 12px" />
        <yg-tags class="visible-sm" style="margin-top: 12px" />
      </aside>
      <!-- 内容 -->
      <section class="main_content">
        <div class="info">
          <div class="info_box" v-for="item in aboutList" :key="item?.id">
            <div class="info_header">
              <h1>{{ item?.title }}</h1>
            </div>
            <div class="info_content" v-html="item?.content"></div>
          </div>
        </div>
        <div class="info" :style="{ marginTop: '12px' }">...</div>
      </section>
      <!-- 右侧边栏 -->
      <aside class="aside_right hidden-xs hidden-sm">
        <yg-recommend />
        <yg-tags style="margin-top: 12px" />
      </aside>
    </main>
    <yg-footer />
  </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      aboutList: [
        {
          id: 1,
          title: "情报",
          content: `<ul>
            <li>爱好：喜欢中分，背带裤，打篮球</li>
            <li>特征：兴趣至上</li>
          </ul>`,
        },
        {
          id: 2,
          title: "我 & 博客",
          content: "<ul><li>博客只是学习过程中的产物</li></ul>",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.about {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
  & > .main_box {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 16px 0;
    min-width: 320px;
    & > .aside_left,
    & > .aside_right {
      display: flex;
      flex-direction: column;
      min-width: 220px;
      max-width: 220px;
    }
    & > .main_content {
      display: flex;
      flex-direction: column;
      margin: 0 12px;
      width: 100%;
      & > .info {
        display: flex;
        flex-direction: column;
        padding: 12px;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        & > .info_box {
          display: flex;
          flex-direction: column;
          & > .info_header {
            display: flex;
            flex-direction: row;
            align-items: center;
            & > h1 {
              margin: 0;
              padding: 6px 0;
              width: 100%;
              border-bottom: 1px solid #eaeaea;
              font-size: 20px;
              font-weight: 500;
              color: #171717;
              line-height: 28px;
            }
          }
          & > .info_content {
            padding: 6px 0;
          }
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .main_box {
    margin: 0;
    padding: 0 !important;
    width: 100vw !important;
    & > .main_content {
      margin: 0 !important;
    }
  }
}
</style>
